import i18n from "@/locals";

export class Draw {
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    angle = 0;

    static config = {
        lineColor: "#2C3137",
        progressColor: "#F6475D",
        backgroundColor: "#171A1F",
        fontSize: 20,
        radius: 200,
        lineWidth: 12,
        distance: 30
    };

    constructor(canvas: HTMLCanvasElement, angle: number) {
        canvas.width = 800;
        canvas.height = 600;
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d")!;
        this.angle = angle;
        this.update();
    }

    update() {
        const { ctx, canvas } = this;
        ctx.save();
        ctx.fillStyle = Draw.config.backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 设置弧线的属性
        ctx.lineWidth = Draw.config.lineWidth; // 设置线宽为4px
        ctx.strokeStyle = "#2B3139"; // 设置线的颜色
        ctx.lineCap = "round";

        // 开始路径
        ctx.beginPath();
        ctx.fillStyle = Draw.config.lineColor;

        // 绘制半圆弧线
        const centerX = canvas.width / 2; // 圆心的X坐标
        const centerY = canvas.height / 2; // 圆心的Y坐标
        // const radius = 200; // 半径
        const startAngle = Math.PI; // 起始角度 (180度)
        const endAngle = 0; // 结束角度 (0度)
        const counterclockwise = false; // 逆时针方向 (开口向下)

        ctx.arc(centerX, centerY, Draw.config.radius, startAngle, endAngle, counterclockwise);

        // 绘制弧线
        ctx.stroke();

        // 0 --- s + Math.PI * 0.5
        // 90 --- s + Math.PI * 1
        // -90 --- s + Math.PI * 1

        // -90----0-----90
        // -1-----0.5---1
        let aim = startAngle + this.a2r(this.angle);
        ctx.beginPath();
        ctx.strokeStyle = Draw.config.progressColor; // 设置线的颜色
        ctx.lineCap = "butt";
        ctx.arc(centerX, centerY, Draw.config.radius, startAngle, aim, counterclockwise);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = Draw.config.progressColor; // 设置线的颜色
        ctx.lineCap = "round";
        ctx.arc(centerX, centerY, Draw.config.radius, startAngle, startAngle + this.a2r(0.1), counterclockwise);
        ctx.stroke();

        let distance = Draw.config.radius + Draw.config.distance;

        ctx.font = Draw.config.fontSize + "px arial";
        ctx.fillStyle = "#ffffff";
        ctx.textAlign = "center";
        // ctx.fillText("中立", centerX, centerY - distance);
        ctx.fillText(i18n.global.t("message.Skill.draw.a"), centerX, centerY - distance);

        ctx.textAlign = "left";
        // ctx.fillText("强烈买入", centerX + distance, centerY);
        ctx.fillText(i18n.global.t("message.Skill.draw.b"), centerX + distance, centerY);

        // ctx.fillText("买入", centerX + distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));
        ctx.fillText(i18n.global.t("message.Skill.draw.c"), centerX + distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));

        ctx.textAlign = "right";
        // ctx.fillText("强烈卖出", centerX - distance, centerY);
        ctx.fillText(i18n.global.t("message.Skill.draw.d"), centerX - distance, centerY);

        // ctx.fillText("卖出", centerX - distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));
        ctx.fillText(i18n.global.t("message.Skill.draw.e"), centerX - distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));

        ctx.textAlign = "center";
        // ctx.fillText("中立", centerX, centerY + 40);
        ctx.fillText(i18n.global.t("message.Skill.draw.f"), centerX, centerY + 40);

        ctx.fillStyle = "#ffffff";
        ctx.translate(centerX, centerY);
        ctx.rotate(this.a2r(this.angle - 90));
        ctx.beginPath();
        ctx.moveTo(0, -Draw.config.radius * 0.8);
        ctx.lineTo(-7, 0);
        ctx.lineTo(7, 0);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
        ctx.fill();

        ctx.restore();
    }

    a2r(n: number) {
        return n * (Math.PI / 180);
    }
}
